<template>
   <el-row style="margin-bottom: 20px;"   >
      <el-col :span="20" >
        <el-input v-model="queryHeader.keyword" placeholder="关键字" class="w120 mr8"></el-input>
        <el-select
            v-model="queryHeader.examineeGroup"
            placeholder="所在班级"
            class="w120 mr8"    
            suffix-icon 
        >
        <el-option  v-for="item in options.examineeGroups"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
        <el-select v-model="queryHeader.duty" class="w120 mr8" placeholder="职务" suffix-icon >
            <el-option  v-for="item in options.duties"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button color="#1C84c6">查询</el-button>
    </el-col>
    <div :span="2" >
        <el-button text style="border: 1px solid #e7eaec;" @click="exportMissExamList">导出名单</el-button>
    </div>
    </el-row>
     <!--缺考考生表格  -->
    <el-table ref="multipleTableRef" 
		:header-cell-style="{color:'#2A62BC'}"
		:data="tableData"   s
		style="width: 100%;" 
        size="small"
        border
		>
        <!-- <el-table-column   type="selection" width="35" /> -->
		<el-table-column  prop="examinee" label="用户名"  align="center" width="100"></el-table-column>
		<el-table-column  prop="name" label="真实姓名"  align="center" width="80"></el-table-column>
		<el-table-column  prop="idNumber" label="手机号"  align="center" width="80"></el-table-column>
		<el-table-column prop="examineeGroup" label="班级" align="center"></el-table-column>
		<el-table-column  label="状态" align="center" width="80">
			<template #default="scope">
				<a class="test-success" v-if="scope.row.state=='正常'">{{ scope.row.state}}</a>
				<a class="test-danger" v-else>{{ scope.row.state}}</a>
			</template>
		</el-table-column>
        <el-table-column label="注册时间"  prop="registrationTime" align="center" ></el-table-column>
        <el-table-column label="最后登录时间"  prop="releaseTime" align="center" ></el-table-column>
	
	</el-table>
			<!-- 分页 -->
	<div class="pagination">
		<el-pagination
		:current-page="query.pageIndex"
			:page-size="query.pageSize"
			:page-sizes="[5, 10, 15, 20]"
			size="small"
			layout="total, sizes, prev, pager, next, jumper"
			:total="pageTotal"
			@size-change="handleSizeChange"
			@current-change="handlePageChange"/>
	</div>
</template>

<script setup>
import { ref, reactive,toRefs } from 'vue';
import { getPaperInfo} from '../../../api/exam' ;
const props = defineProps({
    testPaperName:String
})
const {testPaperName} = toRefs(props)
const emit =defineEmits(['update:testPaperName'])
console.log(testPaperName,'<<<adsfasdfg')


const  queryHeader=reactive({
    'keyword':'',//关键字
    'examineeGroup':'',//考生组
    'duty':'', //职务
})
//相关数据
const options=reactive({
    examineeGroups:[
        {
            value:'扬州公司',
            label:'扬州公司'
        },
        {
            value:'苏州分公司',
            label:'苏州分公司'
        },
        {
            value:'无锡分公司',
            label:'无锡分公司'
        },
    ],
    duties:[
        {
            value:'考生',
            label:'考生'
        },
        {
            value:'初级开发工程师',
            label:'初级开发工程师'
        },
        {
            value:'中级开发工程师',
            label:'中级开发工程师'
        }
    ],
    
})

//分页字体
const small = ref(true)
//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getPaperInfo({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();

// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};
/**--------导出所有缺考学生名单------- */
const exportMissExamList=()=>{
    ElMessageBox.confirm(
    '<Strong>该操将导出所有缺考人员EXCEL表格,如果数据较多可能需要较长的时间。</Strong>',
    '确定要导出所有缺考人员吗？',
    {
      confirmButtonText: '导出',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      center:true,
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '导出成功',
      })
    })
}
</script >
<style lang="less" scoped>
.test-success{
	font-size: 15px;
	color: #1c84c6;
	font-weight: 700;
}

.test-waring{
	font-size: 15px;
	color: #F8AC59;
	font-weight: 700;
}
.test-danger{
	font-size: 15px;
	color: #ED5565;
	font-weight: 700;
}
.b{
    color: #1c84c6;
}

.tabs-p{
  margin: 0px 0px 20px;
  color: #AAAAAA;
}
.w120{
    width: 110px;
}
.mr8{
 margin-right: 5px;
}
</style>
